<?php if (!defined('THINK_PATH')) exit(); /*a:2:{s:81:"/Users/yandian/work/matian/application/weixin/view/default/onlinewrite/index.html";i:1492013275;s:77:"/Users/yandian/work/matian/application/weixin/view/default/public/layout.html";i:1491744643;}*/ ?>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>在线预约</title>
    <?php echo _css('css/phone.css'); echo _css('static/css/weui.css'); echo _css('css/weui2.css'); ?>
<style>
    .checkbox {
        display: inline-block;
        width: 45px;
        margin-left: 15px;
        white-space: nowrap;
        height: 15px;
        padding-left: 20px;
        background-position: left center;
        background-image: url('/images/icon_no.png');
        background-size: 15px 15px;
        background-repeat: no-repeat;
        font-size: 14px;
        line-height: 16px;
    }

    .checkbox:first-child {
        margin-left: 0;
    }

    .checked {
        background-image: url('/images/icon_yes.png');
    }

</style>

</head>
<body>
    

<div id="form1">

    <div class="tabs">
        <div class="tab" id="step1">
            <div class="form mt10" id="form_inner">
                <div class="flex border-b border-t">
                    <label>出租人类型</label>
                    <div class="flex-con text-right">
                        <input type="hidden" name="lessor_type" id="lessor_type" value="0">
                        <div class="checkbox-area" id="lessor_type_checkboxs">
                            <div class="checkbox checked" data-id="0">
                                单位
                            </div>
                            <div class="checkbox" data-id="1">
                                个人
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex border-b" id="lessor_name_area">
                    <label for="lessor_name" id="lessor_name_label">单位名称</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="lessor_name" id="lessor_name"
                               placeholder="请输入单位名称">
                    </div>
                </div>
                <div class="flex border-b" id="lessor_identity_area">
                    <label for="lessor_identity" id="lessor_identity_label">证件号</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="lessor_identity"
                               id="lessor_identity"
                               placeholder="请填写组织机构代码号/营业执照/社会信用代码">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="lessor_postcode">通信地址</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="lessor_address"
                               id="lessor_address"
                               placeholder="请输入通信地址">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="lessor_postcode">邮编</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="lessor_postcode"
                               id="lessor_postcode"
                               placeholder="请输入邮编">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="lessor_telephone">电话</label>
                    <div class="flex-con">
                        <input type="tel" autocomplete="off" class="form-control" name="lessor_telephone"
                               id="lessor_telephone"
                               placeholder="请输入电话">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="lease_area">房屋坐落地址</label>
                    <div class="flex-con">
                        <input type="text" readonly autocomplete="off" class="form-control" name="lease_area"
                               id="lease_area"
                               placeholder="请选择房屋坐落地址">
                    </div>
                    <div class="icon icon-next"></div>
                </div>
                <div class="border-b">
        <textarea name="lease_address" placeholder="请填写具体街道等详细地址"
                  id="lease_address" rows="3" class="form-control text-left"></textarea>
                </div>

                <div class="flex border-b">
                    <label for="lease_measure">租赁面积</label>
                    <div class="flex-con">
                        <input type="number" autocomplete="off" class="form-control" name="lease_measure"
                               id="lease_measure"
                               placeholder="请输入租赁面积">
                    </div>
                    <div class="text-gray pl5">m<sup>2</sup></div>
                </div>
                <div class="flex border-b">
                    <label for="lease_price">月租金</label>
                    <div class="flex-con">
                        <input type="number" autocomplete="off" class="form-control" name="lease_price" id="lease_price"
                               placeholder="请输入月租金">
                    </div>

                    <div class="text-gray pl5" style="padding-left: 7px;">元&nbsp;</div>
                </div>
                <div class="form-title">租赁期限</div>
                <div class="flex border-b border-t">
                    <label for="lease_start_date">开始日期</label>
                    <div class="flex-con">
                        <input type="text" readonly autocomplete="off" class="form-control" name="lease_start_date"
                               id="lease_start_date"
                               placeholder="请选择租赁开始日期">
                    </div>
                    <div class="icon icon-next"></div>
                </div>
                <div class="flex border-b">
                    <label for="lease_end_date">截止日期</label>
                    <div class="flex-con">
                        <input type="text" readonly autocomplete="off" class="form-control" name="lease_end_date"
                               id="lease_end_date"
                               placeholder="请选择租赁截止日期">
                    </div>
                    <div class="icon icon-next"></div>
                </div>
                <div class="flex border-b mt10 border-t">
                    <label for="owner_name">产权人或合法使用人</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="owner_name" id="owner_name"
                               placeholder="产权人或合法使用人">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="owner_identity">产权人证件号</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="owner_identity"
                               id="owner_identity"
                               placeholder="产权人证件号">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="owner_identity">材料名称及号码</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="material_name"
                               id="material_name"
                               placeholder="产权（使用权）材料名称及号码">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="lease_trustee">受委托人</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="lease_trustee"
                               id="lease_trustee"
                               placeholder="受委托人">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="lease_trustee_phone">受委托人电话</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="lease_trustee_phone"
                               id="lease_trustee_phone" placeholder="受委托人电话">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="lease_trustee_identity">受委托人证件号</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="lease_trustee_identity"
                               id="lease_trustee_identity" placeholder="身份证/港澳台通行证/护照号">
                    </div>
                </div>

            </div>
            <div class="btn-area">
                <div id="submitBtn" class="bg-primary btn-block btn">下一步</div>
            </div>
        </div>
        <div class="tab" id="step2">

            <div class="form">
                <div class="form-title bg-gray">
                    承租人(个人)
                </div>
                <div class="flex border-b border-t">
                    <label for="renter_name">姓名</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="renter_name" id="renter_name"
                               placeholder="请输入承租人姓名">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="renter_identity">承租人证件号</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="renter_identity"
                               id="renter_identity"
                               placeholder="身份证/港澳台通行证/护照号">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="renter_postcode">邮编</label>
                    <div class="flex-con">
                        <input type="number" autocomplete="off" class="form-control" name="renter_postcode"
                               id="renter_postcode"
                               placeholder="请输入承租人邮编">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="renter_postcode">通讯地址</label>
                    <div class="flex-con">
                        <input type="number" autocomplete="off" class="form-control" name="renter_address"
                               id="renter_address"
                               placeholder="请输入通讯地址">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="renter_telephone">承租人电话</label>
                    <div class="flex-con">
                        <input type="tel" autocomplete="off" class="form-control" name="renter_telephone"
                               id="renter_telephone"
                               placeholder="承租人联系电话">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="rent_trustee">受委托人</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="rent_trustee" id="rent_trustee"
                               placeholder="受委托人姓名">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="rent_trustee_phone">受委托人电话</label>
                    <div class="flex-con">
                        <input type="tel" autocomplete="off" class="form-control" name="rent_trustee_phone"
                               id="rent_trustee_phone"
                               placeholder="受委托人联系电话">
                    </div>
                </div>
                <div class="flex border-b">
                    <label for="rent_trustee_identity">受委托人证件号</label>
                    <div class="flex-con">
                        <input type="text" autocomplete="off" class="form-control" name="rent_trustee_identity"
                               id="rent_trustee_identity" placeholder="身份证/港澳台通行证/护照号">
                    </div>
                </div>
            </div>
            <div class="btn-area">
                <div id="submitBtn2" class="bg-primary btn-block btn">保存提交</div>
            </div>
        </div>
    </div>

</div>


<?php echo _js('static/layermobile/layer.js'); echo _js('js/phone.js'); echo _js('static/js/zepto.min.js'); echo _js('static/js/weui.js'); echo _js('js/picker.js'); echo _js('js/picker-city.js'); ?>


<script>
    $(function () {
        $('#submitBtn').on('click', function () {
            var is_valid = true;
            $('#form_inner').find('input[name],textarea[name]').each(function () {
                if (!this.value.trim() && this.name != 'address') {
                    is_valid = false;
                    var message = $(this).attr('placeholder');
                    if(message.indexOf('请') == -1){
                        message = '请填写'+message;
                    }
                    ui.msg(message);
                    return false;
                }
            });
            if (is_valid) {
                location.hash = '#step2';
            }
        });
        $('#submitBtn2').on('click', function () {
            var postData = {};
            var is_valid = true;
            $('#form1').find('input[name],textarea[name]').each(function () {
                if (!this.value.trim() && this.name != 'address') {
                    is_valid = false;
                    ui.msg($(this).attr('placeholder'));
                    return false;
                }
                postData[this.name] = this.value.trim();
            });
            if (is_valid) {
                ui.toast.show();
                $.post("<?php echo U('save'); ?>", postData, function (rt) {
                    ui.toast.hide();
                    if (rt.status == 1) {
                        location.href = "<?php echo U('saveResult'); ?>";
                    } else {
                        ui.msg(rt.info);
                    }
                }, 'json');
            }
        });

        $('#lease_start_date').on('click', function () {
            var date = new Date();
            weui.datePicker({
                id:'lease_start_date',
                lastPos:[0,date.getMonth(),date.getDate()],
                start: new Date().getFullYear(),
                title:'选择开始日期',
                end: new Date().getFullYear()+10,
                onChange: function (result) {
                    $('#lease_start_date').val(c.dateFormatter(result));
                },
                onConfirm: function (result) {
                }
            });
        });

        $('#lease_end_date').on('click', function () {
            var date = new Date();
            weui.datePicker({
                id:'lease_end_date',
                lastPos:[0,date.getMonth(),date.getDate()],
                start: new Date().getFullYear(),
                title:'选择截止日期',
                end: new Date().getFullYear()+10,
                onChange: function (result) {
                    $('#lease_end_date').val(c.dateFormatter(result));
                },
                onConfirm: function (result) {
                }
            });
        });

        $('#lessor_type_checkboxs').on('click', '.checkbox', function () {
            $(this).addClass('checked').siblings().removeClass('checked');
            var id = $(this).data('id');
            $('#lessor_type').val(id);
            if (id == 0) {
                $('#lessor_name_label').text('单位名称');
                $('#lessor_name').attr('placeholder', '请输入单位名称');
                $('#lessor_identity').attr('placeholder', '请填写组织机构代码号/营业执照/社会信用代码');
            } else {
                $('#lessor_name_label').text('出租人姓名');
                $('#lessor_name').attr('placeholder', '请输入出租人姓名');
                $('#lessor_identity').attr('placeholder', '请填写身份证号码');
            }
            $('#lessor_name_area,#lessor_identity_area').show();
        });
        function hashChange() {
            var hash = location.hash || '#step1';
            if(hash){
                $(hash).show().siblings().hide();
                document.body.scrollTop = 0;
            }
        }

        $("#lease_area").cityPicker({
            title: "选择房屋坐落地址"
        });

        window.addEventListener('hashchange', hashChange);
        hashChange();
    });
</script>


    
        <?php echo W('WxJsApi/shared'); ?>
    
</body>
</html>